<!--
  @Name: channelDetail
  @Description: 渠道详情
  @Author: huangcy@zlsoft.cn
  @CreateDate: 2023/6/28
 -->
<template>
  <div class="channel-detail">
    <!--    产品信息   -->
    <div class="product">
      <span class="title">产品信息</span>
      <page-form ref="productFormRef" :form-data="productData" :form-format="productFormat" label-width="80px"/>
    </div>
    <!--    渠道详情   -->
    <div class="channel">
      <div>
        <span class="title">渠道详情</span>
        <el-button type="primary" size="mini" :loading="saveLoad" @click="saveForm">保存</el-button>
      </div>
      <div class="channel-form">
        <page-form2 ref="channelFormRef" :form-data="channelData" :form-format="channelFormat" label-width="90px"/>
      </div>
      <div class="channel-form width2">
        <el-form>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="买家秀计划">
                <el-input v-model="textArea.buyerShowPlan" type="textarea" placeholder="请输入" style="width: 100%"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="买家秀完成">
                <el-input v-model="textArea.buyerShowComplete" type="textarea" placeholder="请输入"
                          style="width: 100%"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="老客户计划">
                <el-input v-model="textArea.oldCustomerPlan" type="textarea" placeholder="请输入" style="width: 100%"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="老客户完成">
                <el-input v-model="textArea.oldCustomerComplete" type="textarea" placeholder="请输入"
                          style="width: 100%"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-button type="primary" size="mini" @click.native="reCalcPrice">重新计算价格</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!--    销量统计   -->
      <div class="sale">
        <sale-query :arr="['supplierEcharts']" name="产品销售" :is-no-channel="true" :channelIds="row.channelId" :goodsIds="row.goodsId"/>
      </div>
    </div>
  </div>
</template>

<script>
import PageForm from "./pageForm.vue";
import PageForm2 from "./pageForm.vue";
import { edit } from '@/api/erp/jstChannelGoods'
import SaleQuery from "./saleQuery.vue";

export default {
  props: ['row'],
  components: { SaleQuery, PageForm, PageForm2 },
  data() {
    return {
      // 产品信息
      productData: {},
      productFormat: Object.freeze([
        { label: '商家编码', prop: 'goodsIId', type: 'input', disable: true },
        { label: '商品编码', prop: 'goodsCode', type: 'input', disable: true },
        { label: '产品型号', prop: 'goodsModel', type: 'input', disable: true },
        { label: '产品等级', prop: 'goodsLevel', type: 'select', disable: true },
        { label: '供应商', prop: 'supplierName', type: 'input', disable: true },
        { label: '类型', prop: 'goodsType', type: 'select', disable: true },
        { label: '尺码', prop: 'goodsSize', type: 'select', disable: true },
        { label: '颜色规格', prop: 'goodsColor', type: 'input', disable: true },
        { label: '拍照样品', prop: 'goodsPhotoSample', type: 'input', disable: true },
        { label: '内长', prop: 'goodsLength', type: 'textArea', disable: true },
        { label: '材质', prop: 'goodsMaterial', type: 'textArea', disable: true },
        { label: '拍照突出点', prop: 'goodsPhotoHighlight', type: 'textArea', disable: true },
        { label: '大货', prop: 'goodsFirstBulk', type: 'input', disable: true },
        // { label: '成本1', prop: 'goodsCostPrice1', type: 'inputNumber', disable: true },
        // { label: '成本2', prop: 'goodsCostPrice2', type: 'inputNumber', disable: true },
        // { label: '成本3', prop: 'goodsCostPrice3', type: 'inputNumber', disable: true },
        { label: '在库库存', prop: 'usableQty', type: 'inputNumber', disable: true },
        { label: '采购在途', prop: 'purchaseQty', type: 'inputNumber', disable: true },
        { label: '当日销售', prop: 'sale0', type: 'inputNumber', disable: true },
        { label: '7天内销售', prop: 'sale7', type: 'inputNumber', disable: true },
        { label: '备注', prop: 'remark', type: 'input', disable: true },
        { label: '照片', prop: 'goodsImageUrl', type: 'image', disable: true },
      ]),
      channelData: {},
      channelFormat: Object.freeze([
        { label: '渠道编码', prop: 'channelCode', type: 'input', disable: true },
        { label: '渠道名称', prop: 'channelName', type: 'input', disable: true },
        { label: '渠道产品链接', prop: 'link', type: 'input'},
        { label: '渠道产品等级', prop: 'level', type: 'input'},
        { label: '渠道价格1', prop: 'channelPrice1', type: 'input' },
        { label: '渠道价格2', prop: 'channelPrice2', type: 'input' },
        { label: '渠道价格3', prop: 'channelPrice3', type: 'input' },
        { label: '产品主色', prop: 'mainColor', type: 'input' },
        { label: '拍照日期', prop: 'photoTime', type: 'date' },
        { label: '预上新日期', prop: 'preGroundNewTime', type: 'date' },
        { label: '上新日期', prop: 'groundNewTime', type: 'date' },
        { label: '备注', prop: 'remark', type: 'input'}
      ]),
      textArea: {},
      saveLoad: false,
      // 销售柱状图
      option: {
        grid: {
          left: 'auto',
          right: '0',
          bottom: '20px',
          top: '20px',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        color: '#0882d6',
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar'
          }
        ]
      },
    }
  },
  watch: {
    row: {
      handler(val) {
        this.channelData = val || {}
        this.productData = val || {}
        this.textArea = val || {}
      }, immediate: true, deep: true
    }
  },
  methods: {
    // 保存
    saveForm() {
      if (this.channelData.id) {
        this.saveLoad = true
        const { buyerShowPlan, buyerShowComplete, oldCustomerPlan, oldCustomerComplete } = this.textArea
        edit({
          ...this.$refs.channelFormRef.data,
          buyerShowPlan: buyerShowPlan ? buyerShowPlan : '',
          buyerShowComplete: buyerShowComplete ? buyerShowComplete : '',
          oldCustomerPlan: oldCustomerPlan ? oldCustomerPlan : '',
          oldCustomerComplete: oldCustomerComplete ? oldCustomerComplete : '',
        }).finally(() => {
          this.saveLoad = false
        }).then((res) => {
          this.$message.success(res.msg)
          this.$emit('success')
        })
      }
    },
    // 重新计算价格
    reCalcPrice() {
      if (this.channelData.id) {
        //渠道价格=X*商品成本价格^2+Y*商品成本价格+Z (结果取整四舍五入)
        const { channelPriceX1, channelPriceY1, channelPriceZ1, channelPriceX2, channelPriceY2, channelPriceZ2, channelPriceX3, channelPriceY3, channelPriceZ3 } = this.channelData
        const { goodsCostPrice1, goodsCostPrice2, goodsCostPrice3 } = this.productData
        let channelPrice1 = (channelPriceX1 * goodsCostPrice1 * goodsCostPrice1 + channelPriceY1 * goodsCostPrice1 + channelPriceZ1).toFixed(0);
        let channelPrice2 = (channelPriceX2 * goodsCostPrice2 * goodsCostPrice2 + channelPriceY2 * goodsCostPrice2 + channelPriceZ2).toFixed(0);
        let channelPrice3 = (channelPriceX3 * goodsCostPrice3 * goodsCostPrice3 + channelPriceY3 * goodsCostPrice3 + channelPriceZ3).toFixed(0);
        console.log('---------------0-----------------')
        console.log('--------channelPrice1-----------:',channelPrice1)
        console.log('--------channelPrice2-----------:',channelPrice2)
        console.log('--------channelPrice3-----------:',channelPrice3)
        console.log('---------------0-----------------')
        if(goodsCostPrice1 === 0) channelPrice1 = 0;
        if(goodsCostPrice2 === 0) channelPrice2 = 0;
        if(goodsCostPrice3 === 0) channelPrice3 = 0;
        console.log('---------------1-----------------')
        console.log('--------channelPrice1-----------:',channelPrice1)
        console.log('--------channelPrice2-----------:',channelPrice2)
        console.log('--------channelPrice3-----------:',channelPrice3)
        console.log('---------------1-----------------')
        this.$set(this.channelData,'channelPrice1',channelPrice1)
        this.$set(this.channelData,'channelPrice2',channelPrice2)
        this.$set(this.channelData,'channelPrice3',channelPrice3)
      }
    },
  }
}
</script>
<style scoped lang="scss">
.channel-detail {
  width: 100%;
  height: calc(100% + 30px);
  margin-top: -30px;
  display: flex;

  .title {
    position: relative;
    margin: 0 20px 0 10px;
    font-weight: 600;
    font-size: 14px;

    &::before {
      position: absolute;
      content: '';
      height: 20px;
      width: 4px;
      left: -10px;
      top: calc(50% - 10px);
      background-color: #0882d6;
      border-radius: 6px;
    }
  }

  > > > .el-form {
    margin-top: 10px;
  }

  .product {
    width: 290px;
    height: calc(100% - 10px);
    padding: 10px 10px 10px 0;
    border-right: 1px solid #e6e6e6;
    position: relative;

    > .el-button {
      position: absolute;
      right: 15px;
      top: 5px;
    }

    .el-form {
      height: 100%;
      overflow: auto;
      position: absolute;
      top: 37px;
    }
  }

  .channel {
    width: calc(100% - 300px);
    padding: 10px;

    > .el-button {
      margin-left: 20px;
    }

    .sale {
      width: calc(100% + 20px);
      margin: 10px -10px 0 -10px;
      border-top: 1px solid #e6e6e6;
      padding: 10px;

      .span-btn {
        display: inline-block;
        width: 60px;
        height: 32px;
        line-height: 32px;
        background-color: #e6e6e6;
        border-radius: 20px;
        text-align: center;
        cursor: pointer;

        & + .span-btn {
          margin-left: 10px;
        }
      }

      .active {
        color: #ffffff;
        background-color: #0882d6;
      }
    }

    &-form {
      display: inline-flex;
      margin-top: 10px;

      .el-form {
        width: 100%;

        .el-textarea {
          height: 100px;

          ::v-deep .el-textarea__inner {
            height: 100%;
          }
        }
      }

      &:first-of-type {
        width: calc(100% / 2 - 80px);
      }
    }

    .width2 {
      margin-left: 10px;
      width: calc(100% / 2 + 60px);
    }
  }
}

::v-deep .box {
  margin-top: -10px;

  #supplierEcharts {
    width: 100%;
    height: 290px !important;
  }
}
</style>
